<template>
  <div class="flex items-center">
    <v-search></v-search>
    <v-change-theme></v-change-theme>
    <button
      class="btn btn-link text-gray-400 hover:text-gray-500"
      @click="goLogin"
      v-if="!userInfo.cookie"
    >
      登录
    </button>
    <div v-else class="flex items-center cursor-pointer" @click.stop="clickUser">
      <div class="rounded-full h-14 w-14">
        <img class="rounded-full h-14 w-14" :src="userInfo.avatarUrl" alt="" />
      </div>
      <span class="ml-3">{{ userInfo.nickname }}</span>
    </div>
  </div>
  <div
    class="absolute right-40 z-20 cursor-pointer pl-8 pr-8 pb-2 pt-2 bg-gray-300"
    v-if="onOff"
    @click="signOut"
  >
    退出登录
  </div>
</template>

<script setup lang="ts">
import vSearch from "./search.vue";
import vChangeTheme from "./changeTheme/index.vue";
import { useUserStore } from "../../store/index";
import { useRouter } from "vue-router";
import { ref, toRefs } from "vue";

const router = useRouter();

const { userInfo, message, key } = toRefs(useUserStore());

const goLogin = () => {
  router.push("/login");
};
let onOff = ref<boolean>(false);
const clickUser = () => {
  onOff.value = true;
};
window.onclick = () => {
  onOff.value = false;
};
const signOut = () => {
  localStorage.removeItem("userInfo");
  userInfo.value = {};
};
</script>

<style scoped lang="scss">
.el-button {
  background-color: skyblue;
  margin-right: 20px;
  &:hover {
    border-color: white;
  }
}
</style>
